/**
 * @file _axiom-swipe-card.scss
 * @description AxiomSwipeCard 滑动卡片组件样式
 */
@use '../../../styles/variables' as *;

.axiom-swipe-card {
  position: relative;
  overflow: hidden;
  background: transparent;
  user-select: none;
  touch-action: pan-y; // 允许垂直滚动，但优化水平触摸
  min-height: var(--axiom-swipe-card-min-height, 120px);
  
  &.is-swiping {
    touch-action: none; // 滑动时禁用所有默认触摸行为
    
    .swipe-card-content {
      box-shadow: var(--axiom-shadow-dark);
      z-index: 2;
    }
  }
  
  .swipe-card-content {
    position: relative;
    transition: transform var(--axiom-transition-duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    min-height: inherit; // 继承最小高度
    
    // 确保AxiomCard也有统一高度
    :deep(.axiom-card) {
      min-height: inherit;
      display: flex;
      flex-direction: column;
      height: 100%; // 占满父容器
      
      .card-body,
      .axiom-card__content,
      .axiom-card__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 0; // 避免内容溢出
      }
      
      // 标题区域固定高度
      .axiom-card__header,
      .card-header {
        flex-shrink: 0;
        min-height: var(--axiom-swipe-card-header-min-height, 40px);
        display: flex;
        align-items: center;
      }
      
      // 底部操作区域固定高度
      .axiom-card__footer,
      .card-footer {
        flex-shrink: 0;
        min-height: var(--axiom-swipe-card-footer-min-height, 36px);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    
    &:active {
      transition: none; // 拖拽时禁用动画
    }
  }
  
  .swipe-card-actions {
    position: absolute;
    top: 0;
    right: calc(var(--axiom-swipe-card-actions-width, 120px) * -1);
    height: 100%;
    width: var(--axiom-swipe-card-actions-width, 120px);
    display: flex;
    align-items: center;
    transition: right var(--axiom-transition-duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
    
    &.visible {
      right: 0;
    }
    
    .action-buttons {
      display: flex;
      height: 100%;
      width: 100%;
      
      .action-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        color: var(--text-color-on-primary);
        font-size: var(--axiom-font-size-xs, 12px);
        cursor: pointer;
        transition: all var(--axiom-transition-duration-fast) ease;
        gap: var(--axiom-spacing-xxs, 4px);
        
        svg {
          width: var(--axiom-icon-size-md, 16px);
          height: var(--axiom-icon-size-md, 16px);
        }
        
        span {
          font-size: var(--axiom-font-size-xxs, 10px);
          font-weight: var(--axiom-font-weight-medium, 500);
        }
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
        
        &:active {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(0.95);
        }
        
        &.edit-btn {
          background: var(--primary-color);
          
          &:hover {
            background: var(--primary-color-dark);
          }
        }
        
        &.delete-btn {
          background: var(--danger-color);
          
          &:hover {
            background: var(--danger-color-dark);
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .axiom-swipe-card {
    .swipe-card-actions {
      width: var(--axiom-swipe-card-actions-width-mobile, 100px);
      right: calc(var(--axiom-swipe-card-actions-width-mobile, 100px) * -1);
      
      .action-buttons .action-btn {
        font-size: var(--axiom-font-size-xxs, 11px);
        
        svg {
          width: var(--axiom-icon-size-sm, 14px);
          height: var(--axiom-icon-size-sm, 14px);
        }
        
        span {
          font-size: 9px;
        }
      }
    }
  }
}